<template>
    <div class="container">
        <el-form 
            :model="RegisterForm" 
            status-icon 
            :rules="rules" 
            ref="ruleForm"
            label-width="80px"
            class="demo-RegisterForm">
            <el-form-item label="用户名" prop="username">
                <el-input 
                    type="txt" 
                    v-model="RegisterForm.username" 
                    suffix-icon="el-icon-user"
                    placeholder="请输入用户名"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input 
                    :type="flagType1"
                    v-model="RegisterForm.password"
                    placeholder="请输入密码"
                >
                <i slot="suffix" class="icon_yanjing"
                    :class="flag1? 'el-icon-microphone' : 'el-icon-turn-off-microphone'" 
                    @click="getFlag1()"
                />
                </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
                <el-input 
                    :type="flagType2" 
                    v-model="RegisterForm.password2"
                    placeholder="请再次输入密码"
                >
                <i slot="suffix" class="icon_yanjing"
                    :class="flag2? 'el-icon-microphone' : 'el-icon-turn-off-microphone'" 
                    @click="getFlag2()"
                />
                </el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input 
                    type="txt" 
                    v-model="RegisterForm.phone" 
                    suffix-icon="el-icon-phone"
                    placeholder="请输入您的手机号"
                >
                </el-input>
            </el-form-item>
            <div class="btn">
                <el-button type="success" @click="submitForm">注册</el-button>
                <el-button @click="resetForm" type="warning">重置</el-button>
            </div>
            <div class="link_login">
                <el-button @click="jumpLogin" type="text">已有帐号，去登陆></el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            flag1: false,
            flagType1: "password",
            flag2: false,
            flagType2: "password",
            RegisterForm: {
                username: "",
                password: "",
                password2: "",
                phone: ""
            },
            rules: {
                username: [
                    { required: true, message: "用户名不能为空", trigger: 'blur' },
                    { min: 5, max: 12, message: "用户名长度为5-12个字符", trigger: 'blur'}
                ],
                password: [
                    { required: true, message: "密码不能为空", trigger: 'blur' },
                    { min: 8, max: 20, message: "密码长度为8-20个字符", trigger: 'blur'}
                ],
                password2: [
                    { required: true, message: "两次输入的密码不一致", trigger: 'blur' },
                    { min: 8, max: 20, message: "密码长度为8-20个字符", trigger: 'blur'}
                ],
                phone: [
                    { required: true, message: "手机号不能为空", trigger: 'blur' },
                    { min: 11, max: 15, message: "手机号长度为11位数", trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        submitForm() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    const { data: res } = await this.$http.post('/user/register', this.RegisterForm)
                    if (res.status !== 200) {
                        if (res.status === 1001) {
                            return this.$message.error("用户已存在")
                        }
                        if (res.status === 1009 || 1010 || 4001) {
                            return this.$message.error(res.message)
                        }
                    } else {
                        this.$router.push('/login')
                        return this.$message({
                            message: "注册成功",
                            type: 'success'
                        })
                    }
                } else {
                    return this.$message.error("输入数据非法，请重新输入")
                }
            })
        },
        getFlag1() {
            this.flag1 = !this.flag1
            this.flagType1 = this.flag1? "text" : "password"
        },
        getFlag2() {
            this.flag2 = !this.flag2
            this.flagType2 = this.flag2? "text" : "password"
        },
        resetForm() {
            this.$refs.ruleForm.resetFields()
        },
        jumpLogin() {
            this.$router.push("/login")
        }
    },
}
</script>

<style scoped>
.container {
    background-image: url(../assets/register_bg.jpg);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.demo-RegisterForm {
    border: 2px solid rgb(245, 243, 248);
    border-radius: 12px;
}
.el-form >>> .el-form-item__label {
    text-align: justify;
    text-align-last: justify;
    color: azure;
}
.el-form >>> .el-form-item.is-required .el-form-item__label:before {
    content: none !important;
}
.el-input{
    width: 280px;
}
.el-form-item{
    margin-left: 30px;
    margin-top: 20px;
    width: 380px;
}
.btn{
    margin-top: 10px;
    margin-right: 60px;
    display: flex;
    justify-content: flex-end;
}
.link_login {
    margin-top: 10px;
    margin-right: 60px;
    display: flex;
    justify-content: flex-end;
}
.el-button--text {
    color: rgb(250, 102, 4);
}
.icon_yanjing {
    padding-right: 5px;
}
</style>